<template>
  <!-- 抢单大厅或订单列表 -->
  <div class="order-center">
    <heads :LeftArrow="false" title="首页"></heads>
    <div class="nav-box">
      <van-search
        v-model="keyWords"
        placeholder="输入关键字搜索"
        left-icon
        right-icon="search"
        @search="getData"
      />
      <!-- tab -->
    </div>
    <div class="nav-place-holder" :style="{height:'2rem'}"></div>
    <van-dropdown-menu active-color="#5bbd97">
  <van-dropdown-item v-model="type" :options="filterListType"/>
  <van-dropdown-item v-model="region" :options="filterListRegion"/>
</van-dropdown-menu>

    <div class="main-content">
          <van-pull-refresh v-model="isLoading" @refresh="getData">
            <!-- 原材料 -->
            <template>
              <div class="cell-title flex space-between" @click="more(1)">
                <h1><img src="@/assets/images/icon-file.png" alt />原材料</h1>
                <span>更多<van-icon name="arrow" /></span>
              </div>
               <template v-if="dataList.rawProduct.list.length > 0">
                   <Cell
                    :roles="roles"
                    :ListData="item"
                    v-for="(item, index) in dataList.rawProduct.list"
                    :key="index"
                    @click.native="jump(item)"
                  ></Cell>
                  <div class="summary-box flex">
                <div class="cell flex">
                  <van-icon name="shop-o" color="#999" size="14" />
                  当前在售：{{ dataList.rawProduct.saleTotal }} 吨
                </div>
                 <div class="cell flex">
                  <van-icon name="sign" color="#999" size="14" />
                  当前在购：{{ dataList.rawProduct.purchaseTotal}}吨
                </div>
                  <div class="cell flex">
                  <van-icon name="after-sale" color="#999" size="14" />
                 累计成交：{{ dataList.rawProduct.tradeTotal}}吨
                </div>
              </div>
              </template>
              <template v-else>
                   <van-empty v-if="!isLoading" description="没有更多数据了~" />
              </template>
              
             
            </template>
            <!-- end -->
            <!-- 成品 -->
             <template >
              <div class="cell-title flex space-between" @click="more(2)">
                <h1><img src="@/assets/images/icon-file.png" alt />成品绒毛区</h1>
                <span>更多<van-icon name="arrow" /></span>
              </div>
              <template v-if="dataList.madeUp.list.length > 0">
                  <Cell
                  :roles="roles"
                  :ListData="item"
                  v-for="(item, index) in dataList.madeUp.list"
                  :key="index+1"
                  @click.native="jump(item)"
                ></Cell>
                <div class="summary-box flex">
                <div class="cell flex">
                  <van-icon name="shop-o" color="#999" size="14" />
                  当前在售：{{ dataList.madeUp.saleTotal }} 吨
                </div>
                 <div class="cell flex">
                  <van-icon name="sign" color="#999" size="14" />
                  当前在购：{{ dataList.madeUp.purchaseTotal}}吨
                </div>
                  <div class="cell flex">
                  <van-icon name="after-sale" color="#999" size="14" />
                 累计成交：{{ dataList.madeUp.tradeTotal}}吨
                </div>
              </div>
              </template>
               <template v-else>
                   <van-empty v-if="!isLoading" description="没有更多数据了~" />
              </template>
              
            </template>
            <!-- end -->
                 
             
            <van-loading size="24px" v-if="isLoading">加载中...</van-loading>
          </van-pull-refresh>
        </div>

    <foots :active="0" ></foots>
  </div>
</template>

<script>
import Vue from "vue";
import { Area } from "vant";
import { Toast, Popup, Picker, Search, Loading, Dialog,Empty  } from "vant";
import adressList from "@/js/json/area.js";
import * as Config from "@/js/common/config";
import { mapState } from "vuex";
Vue.use(Area, Popup, Picker, Loading);
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve),
    foots: resolve => require(["@/components/common/foots"], resolve),
    Cell: resolve => require(["@/components/common/cell-order"], resolve)
  },
  data() {
    return {
      isLoading: true,
      // roles:'platform',
      filterListType:  Config.getFilterData().typeList,// 类别
      filterListRegion: Config.getFilterData().regionList,// 地区
      type:1,
      region:1,
      dataList: {
        rawProduct:{
          list:[]
        },
         madeUp:{
          list:[]
        }
      },
      keyWords: "", //搜索关键字
      pageNo:1,
      pageSize:5,
    };
  },
  watch: {
    "$route":{
      handler(newVal,oldVal){
        if(this.$route.query.openid){
          this.$store.commit('saveOpenId',this.$route.query.openid)
        }
      },
      immediate:true

    },
    "type":{
      handler(newVal,oldVal){
         window.scrollTo(0,0);
        this.getData()
      },
      immediate:true

    },
    "region":{
      handler(newVal,oldVal){
         window.scrollTo(0,0);
        this.getData()
      },

    }
  },
  computed: {
    ...mapState(["roles","userInfo"])
  },
  methods: {
   // 更多
   more(data){
      let _this = this;
      
      _this.$router.push({name:'list',params:{type:data}})
   },
    //获取数据
    getData() {
      let _this = this;
      window.scrollTo(0,0);
      this.isLoading = true;
  
      this.$ajax
        .post(`${this.$baseUrl}/portal/home/content`, {
          infoTypeId:_this.$route.query.infoTypeId ? _this.$route.query.infoTypeId : '',
          areaScope: _this.region === 1 ? _this.userInfo.countyId : _this.region, // 发布区域范围, 不传全部 ，1 只看本地，为1时必须是登录后才行 
					issueType: _this.type, // (integer, optional): 发布类型:1 收购 2 销售 ,
					optimizeCountSql: "", // (boolean, optional),
					pageNo: _this.pageNo, // (integer): 页数 ,
					pageSize: _this.pageSize, // (integer): 条数 ,
					userId: "", //(integer, optional): 登录的用户id，非必填
          keyword:_this.keyWords
        })
        .then(function(res) {
          _this.isLoading = false;
          if (res.data.code == 200) {
            _this.dataList = res.data.data[0];
          }
      
        })
        .catch(function(error) {
          _this.isLoading = false;

          console.log(error);
        });
    },

    jump(data) {
      let _this = this
     _this.$router.push({path: `/orderDetail/${ data.detailId }/${ data.issueId }`});
    }
  },
  created() {
    
    
   
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.order-center {
  .nav-box {
    position: fixed;
    width: 100%;
    left: 0;
    top: 1rem;
    z-index: 2;
  }
  .nav-place-holder {
    width: 100%;
    height: 1.7rem;
  }
  .main-content{
    min-height: 71vh;
  }
  /deep/ .van-dropdown-menu{
    position: fixed;
    top: 2.1rem;
    width:100%;
    left: 0;
    z-index: 1;
  }
  .main-content {
    min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
  /deep/ .van-search {
    padding: 0.3rem;
    box-sizing: border-box;
    .van-search__content {
      padding: 0.1rem 0.3rem;
      font-size: 0.3rem;
      background: #f7f7f7;
      color: #999;
      box-sizing: border-box;
      border-radius: 0.3rem;
    }
  }
  .summary-box{
    flex-wrap: wrap;
    justify-content: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: .3rem;
    font-size:.3rem;
    .cell{
      // flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      font-size: .28rem;
      padding-bottom: .1rem;
      width:50%;
      color: #999;
      .van-icon{
        margin-right: .1rem;
      }
    }
  }
  .cell-title{
    font-size: .28rem;
    padding: .3rem 0;
    color: #999;
    
    h1{
      font-size: .3rem;
      color: #333;
    }
    img{
      width: .5rem;
      vertical-align: middle;
      margin-right: .2rem;
    }
  }

}
</style>
